<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" type="text/css" href="assets/css/demo.css">
  <link rel="stylesheet" type="text/css" media="screen" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <link rel="stylesheet" type="text/css" media="screen" href="https://cdnjs.cloudflare.com/ajax/libs/rateYo/2.3.1/jquery.rateyo.min.css">
 
  <meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
  <title>表单构建器</title>
  
</head>

<body>
  <div class="content">
    <h1 style="text-align:center">表单构建器</h1>
        <div class="action-buttons">
      <h2>按钮组</h2>
      <button type="button" id="previewhtml" onclick="previewhtml()" >预览HTML</button>
      <button id="showData" type="button">显示数据</button>
      <button id="clearFields" type="button">清除所有字段</button>
      <button id="getData" type="button">获得数据</button>
      <button id="getXML" type="button">获得xml数据</button>
      <button id="getJSON" type="button">获得json数据</button>
      <button id="getJS" type="button">获得js</button>
      <button id="setData" type="button">设置数据</button>
      <button id="addField" type="button">添加字段</button>
      <button id="removeField" type="button">删除字段</button>
      <button id="testSubmit" type="submit">提交测试</button>
      <button id="resetDemo" type="button">重置</button>
     <!--  <h2>国际化</h2>
      <select id="setLanguage">
        <option value="zh-CN" >中文</option>
       	<option value="en-US" >English</option>
        <option value="ar-TN" dir="rtl">تونسي</option>
        <option value="de-DE">Deutsch</option>
        <option value="es-ES">español</option>
        <option value="fa-IR" dir="rtl">فارسى</option>
        <option value="fr-FR">français</option>
        <option value="nb-NO">norsk</option>
        <option value="nl-NL">Nederlands</option>
        <option value="pt-BR">português</option>
        <option value="ro-RO">român</option>
        <option value="ru-RU">Русский язык</option>
        <option value="tr-TR">Türkçe</option>
        <option value="vi-VN">tiếng việt</option>
        <option value="zh-TW">台語</option>
       
      </select> -->
    </div>
    <br>
    <div>
    	<button id="edit-form">编辑表单</button>
    </div>
    <div id="stage1" class="build-wrap"></div>
    <form class="render-wrap" style="border:3px solid #FF0000"></form>
   
    <br>
     <!-- 预览结果 -->
     <div style="border:3px solid #FF0000">
     	<h2>代码预览</h2>
    	<pre><code  id="markup"></code></pre> 
     </div>

  </div>
  <script src="assets/js/vendor.js"></script>
  <script src="assets/js/form-builder.min.js"></script>
  <script src="assets/js/form-render.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/rateYo/2.3.1/jquery.rateyo.min.js"></script>
  <script src="assets/js/demo.js"></script>
  <script type="text/javascript"> 
  //预览html
  function previewhtml(){
	  	var escapeEl = document.createElement('textarea');
	   	code = document.getElementById('markup');
  		
	  	escapeHTML = function(html) {
	      escapeEl.textContent = html;
	      return escapeEl.innerHTML;
	    },
	  
	    addLineBreaks = function(html) {
	        return html.replace(new RegExp('&gt; &lt;', 'g'), '&gt;\n&lt;').replace(new RegExp('&gt;&lt;', 'g'), '&gt;\n&lt;');
	      };
	    // set < code > innerHTML with escaped markup
	    code.innerHTML = addLineBreaks(escapeHTML($('.render-wrap').html()));
	
 
  }
  </script>
</body>

</html>
